<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./personcenter.css" />
		<link rel="stylesheet" href="./font/iconfont.css">
	</head>
	<body>
		<div class="top">
			<div class="top-up">
				<span class="iconfont icon-dianhua font1"></span>
				<p>国家/地区: 中国大陆<span class="iconfont icon-xiangxiajiantou"></span></p>
				<img src="./img/2.png" alt="" class="fendi">
				<div class="top-right">
					<a href="#">FENDI与<span class="person"></span></a>
					<a href="personcenter.html">我的订单</a>
					<span class="iconfont icon-sousuo font2"></span>
					<span class="iconfont icon-nanzhuang font3"></span>
				</div>
			</div>
			<div class="nav">
				<ul>
					<li>女士
						<div class="menu1">
							<dl>
								<dt>精选推荐</dt>
								<dd><a href="#">新款上市</a></dd>
								<dd><a href="#">Fendi x Chaos</a></dd>
								<dd><a href="#">春夏系列2021</a></dd>
								<dd><a href="#">Fendi Peekaboo</a></dd>
								<dd><a href="#">Fendi Baguette</a></dd>
								<dd><a href="#">Forever Fendi Watches</a></dd>
								<dd><a href="#">秋冬系列2020-21</a></dd>
							</dl>
							<dl>
								<dt>手袋</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Peekaboo</a></dd>
								<dd><a href="#">Baguette</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">手提包</a></dd>
								<dd><a href="#">波士顿包</a></dd>
								<dd><a href="#">水桶包</a></dd>
								<dd><a href="#">迷你包</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">手拿包</a></dd>
								<dd><a href="#">背包</a></dd>
								<dd><a href="#">珍惜皮手袋</a></dd>

							</dl>
							<dl>
								<dt>成衣</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">外套</a></dd>
								<dd><a href="#">夹克</a></dd>
								<dd><a href="#">连衣裙</a></dd>
								<dd><a href="#">上衣和衬衫</a></dd>
								<dd><a href="#">针织衫</a></dd>
								<dd><a href="#">半身裙及裤装</a></dd>
								<dd><a href="#">T恤衫和卫衣</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">运动服</a></dd>
								<dd><a href="#">沙滩装</a></dd>

							</dl>
							<dl>
								<dt>鞋履</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Colobri</a></dd>
								<dd><a href="#">长靴及短靴</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">运动鞋</a></dd>
								<dd><a href="#">高跟鞋</a></dd>
								<dd><a href="#">路跟鞋</a></dd>
								<dd><a href="#">平底鞋</a></dd>
								<dd><a href="#">凉鞋及拖鞋</a></dd>
								<dd><a href="#">袜子</a></dd>

							</dl>
							<dl>
								<dt>配饰</dt>
								<dd><a href="#">纺织品配件</a></dd>
								<dd><a href="#">时尚珠宝</a></dd>
								<dd><a href="#">Peekaboo配件</a></dd>
								<dd><a href="#">手袋配件</a></dd>
								<dd><a href="#">皮夹和小配件</a></dd>
								<dd><a href="#">太阳眼镜</a></dd>
								<dd><a href="#">腕表</a></dd>
								<dd><a href="#">皮带</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">旅行配件</a></dd>
								<dd><a href="#">高科技配件</a></dd>
							</dl>
						</div>
					</li>
					<li>男士

						<div class="menu2">
							<dl>
								<dt>精选推荐</dt>
								<dd><a href="#">新款上市</a></dd>
								<dd><a href="#">Fendi x Chaos</a></dd>
								<dd><a href="#">春夏系列2021</a></dd>
								<dd><a href="#">Fendi Peekaboo</a></dd>
								<dd><a href="#">Fendi Baguette</a></dd>
								<dd><a href="#">Forever Fendi Watches</a></dd>
								<dd><a href="#">秋冬系列2020-21</a></dd>
							</dl>
							<dl>
								<dt>手袋</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Peekaboo</a></dd>
								<dd><a href="#">Baguette</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">手提包</a></dd>
								<dd><a href="#">波士顿包</a></dd>
								<dd><a href="#">水桶包</a></dd>
								<dd><a href="#">迷你包</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">手拿包</a></dd>
								<dd><a href="#">背包</a></dd>
								<dd><a href="#">珍惜皮手袋</a></dd>

							</dl>
							<dl>
								<dt>成衣</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">外套</a></dd>
								<dd><a href="#">夹克</a></dd>
								<dd><a href="#">连衣裙</a></dd>
								<dd><a href="#">上衣和衬衫</a></dd>
								<dd><a href="#">针织衫</a></dd>
								<dd><a href="#">半身裙及裤装</a></dd>
								<dd><a href="#">T恤衫和卫衣</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">运动服</a></dd>
								<dd><a href="#">沙滩装</a></dd>

							</dl>
							<dl>
								<dt>鞋履</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Colobri</a></dd>
								<dd><a href="#">长靴及短靴</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">运动鞋</a></dd>
								<dd><a href="#">高跟鞋</a></dd>
								<dd><a href="#">路跟鞋</a></dd>
								<dd><a href="#">平底鞋</a></dd>
								<dd><a href="#">凉鞋及拖鞋</a></dd>
								<dd><a href="#">袜子</a></dd>

							</dl>
							<dl>
								<dt>配饰</dt>
								<dd><a href="#">纺织品配件</a></dd>
								<dd><a href="#">时尚珠宝</a></dd>
								<dd><a href="#">Peekaboo配件</a></dd>
								<dd><a href="#">手袋配件</a></dd>
								<dd><a href="#">皮夹和小配件</a></dd>
								<dd><a href="#">太阳眼镜</a></dd>
								<dd><a href="#">腕表</a></dd>
								<dd><a href="#">皮带</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">旅行配件</a></dd>
								<dd><a href="#">高科技配件</a></dd>
							</dl>
						</div>
					<li>童装
						<div class="menu3">
							<dl>
								<dt>精选推荐</dt>
								<dd><a href="#">新款上市</a></dd>
								<dd><a href="#">Fendi x Chaos</a></dd>
								<dd><a href="#">春夏系列2021</a></dd>
								<dd><a href="#">Fendi Peekaboo</a></dd>
								<dd><a href="#">Fendi Baguette</a></dd>
								<dd><a href="#">Forever Fendi Watches</a></dd>
								<dd><a href="#">秋冬系列2020-21</a></dd>
							</dl>
							<dl>
								<dt>手袋</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Peekaboo</a></dd>
								<dd><a href="#">Baguette</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">手提包</a></dd>
								<dd><a href="#">波士顿包</a></dd>
								<dd><a href="#">水桶包</a></dd>
								<dd><a href="#">迷你包</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">手拿包</a></dd>
								<dd><a href="#">背包</a></dd>
								<dd><a href="#">珍惜皮手袋</a></dd>

							</dl>
							<dl>
								<dt>成衣</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">外套</a></dd>
								<dd><a href="#">夹克</a></dd>
								<dd><a href="#">连衣裙</a></dd>
								<dd><a href="#">上衣和衬衫</a></dd>
								<dd><a href="#">针织衫</a></dd>
								<dd><a href="#">半身裙及裤装</a></dd>
								<dd><a href="#">T恤衫和卫衣</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">运动服</a></dd>
								<dd><a href="#">沙滩装</a></dd>

							</dl>
							<dl>
								<dt>鞋履</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Colobri</a></dd>
								<dd><a href="#">长靴及短靴</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">运动鞋</a></dd>
								<dd><a href="#">高跟鞋</a></dd>
								<dd><a href="#">路跟鞋</a></dd>
								<dd><a href="#">平底鞋</a></dd>
								<dd><a href="#">凉鞋及拖鞋</a></dd>
								<dd><a href="#">袜子</a></dd>

							</dl>
							<dl>
								<dt>配饰</dt>
								<dd><a href="#">纺织品配件</a></dd>
								<dd><a href="#">时尚珠宝</a></dd>
								<dd><a href="#">Peekaboo配件</a></dd>
								<dd><a href="#">手袋配件</a></dd>
								<dd><a href="#">皮夹和小配件</a></dd>
								<dd><a href="#">太阳眼镜</a></dd>
								<dd><a href="#">腕表</a></dd>
								<dd><a href="#">皮带</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">旅行配件</a></dd>
								<dd><a href="#">高科技配件</a></dd>
							</dl>
						</div>
					</li>
					<li>婚礼灵感
						<div class="menu4">
							<div class="menu4-dl">
								<dl>
									<dt>她的礼物</dt>
									<dd><img src="./img/5.jpg" alt=""></dd>
									<dd><a href="#" class="check">查看全部</a></dd>
									<dd><a href="#">Fendi x Chaos</a></dd>
									<dd><a href="#">春夏系列2021</a></dd>
									<dd><a href="#">Fendi Peekaboo</a></dd>
									<dd><a href="#">Fendi Baguette</a></dd>
								</dl>
								<dl>
									<dt>他的礼物</dt>
									<dd><img src="./img/4.jpg" alt=""></dd>
									<dd><a href="#" class="check">查看全部</a></dd>
									<dd><a href="#">Peekaboo</a></dd>
									<dd><a href="#">Baguette</a></dd>
									<dd><a href="#">单肩包</a></dd>
									<dd><a href="#">手提包</a></dd>
								</dl>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="main">
			<h6>FENDI & <span class="customername"></span></h6>
			<p>欢迎<span class="customername"></span></p>
			<p>在这里您可以找到您的个人账户的概述和访问独家服务。</p>
		</div>
		<div class="content">
			<div class="content-left">
				<ul>
					<li style="cursor: pointer" class="leftCenter"><span class="iconfont icon-renxiang"></span>个人中心</li>
					<li style="cursor: pointer" class="leftOrder"><span class="iconfont icon-gouwuche"></span>我的订单</li>
					<li style="cursor: pointer" class="leftLocation"><span class="iconfont icon-caidan"></span>收货地址</li>
					<li style="cursor: pointer" class="leftFormation"><span class="iconfont icon-renxiang"></span>账户信息</li>
					<li style="cursor: pointer" class="back"><span class="iconfont icon-iconfontjiantou3"></span>退出登录</li>
				</ul>
			</div>
			<div class="content-right">
				<div class="content-right1">
					<h3>我的订单</h3>
					<ol>
						<li><span class="iconfont icon-icon-- font"><i>1</i></span>全部订单</li>
						<li><span class="iconfont icon-qq font"><i style="display: none;">1</i></span>待支付</li>
						<li><span class="iconfont icon-yanjing font"></span>处理中</li>
					</ol>
				</div>
				<div class="content-right2">
					<h3>收货地址</h3>
					<span>更新并管理您的收货地址</span>
					<p style="cursor: pointer">查看收货地址</p>
				</div>
				<div class="content-right3">
					<h3>账户信息</h3>
					<span>查看或管理您的个人信息</span>
					<p style="cursor: pointer">查看账户信息</p>
				</div>
			</div>
		<div class="content-orders">
			<ul class="ul">
				<li style="border-bottom:3px solid #f9b949;">全部订单<span class="orders"></span></li>
				<li>待支付<span class="pay"></span></li>
				<li>处理中<span class="process"></span></li>
			</ul>
			<div class="content-orders-down">
				<img src="" alt="">
				<ol class="ol">
					<li><h6>凉鞋</h6></li>
					<li>货号8T8019AEG0F14Y9</li>
					<li class="price"></li>
					<li>尺码: <span class="size"></span></li>
					<li>颜色:<span class="color"></li>
				</ol>
				<p class="p" style="cursor: pointer;">立即支付</p>
				<h5 class="h5">查看详情</h5>
			</div>
		</div>
		<div class="content-address">
			<p>送货地址</p>
			<ul class="ul1">
				<li>订单的地址</li>
				<li class="ordersAddress"></li>
				<li class="personphone"></li>
			</ul>
			<h5>新增收货地址</h5>
		</div>
		<div class="content-personmessage">
			<h4>账户信息</h4>
			<p class="number">手机号码</p>
			<input type="text" id="numberphone">
			<p class="namee">称谓</p>
			<input type="text" id="yourname" value="女士">
			<p class="nameee">姓</p>
			<input type="text" id="urename">
			<p class="nameeee">名</p>
			<input type="text" id="yourming">
		</div>
		</div>
		<div class="message">
			<p>订阅我们的新闻资讯</p>
			<p>要获得更多个性化内容，包括访问您所在地区的特殊活动和最新消息，请提供一下详细信息</p>
			<p>手机号码*</p>
			<b></b>
		</div>
		<div class="footer">
			<dl>
				<dt>客服关怀</dt>
				<dd>联系我们</dd>
				<dd>常见问题与解答</dd>
				<dd>订单与配送</dd>
				<dd>退货与退款</dd>
				<dd>追踪您的订单</dd>
			</dl>
			<dl>
				<dt>FENDI与我</dt>
				<dd>登录/注册</dd>
			</dl>
			<dl>
				<dt>企业</dt>
				<dd>寻找精品店</dd>
				<dd>Fendi Private Suites</dd>
				<dd>可持续性</dd>
				<dd>供应链透明化</dd>
			</dl>
			<dl>
				<dt>FENDI ROMA</dt>
				<dd>关于FENDI</dd>
				<dd>Fendi的历史</dd>
				<dd>量身定做</dd>
				<dd>皮草工坊</dd>
				<dd>家居</dd>
				<dd>Fendi Boutique Hotel</dd>
				<dd>腕表</dd>
			</dl>
			<dl>
				<dt>法律咨询</dt>
				<dd>隐私条款</dd>
				<dd>销售条款与条件</dd>
				<dd>网站使用条款</dd>
				<dd>行为准则</dd>
			</dl>
			<dl>
				<dt>FENDI ROMA</dt>
				<dd>
					<span class="iconfont icon-gongzhonghao"></span>
					<span class="iconfont icon-tubiao214"></span>
				</dd>
			</dl>
		</div>
		<div class="finally">
			<p>国家/地区: 中国大陆<span class="iconfont icon-xiangxiajiantou"></span></p>
			<span>@FENDI-保留所有权</span>
			<span>沪ICP备1301824号-1</span>
			<span>沪公网安备31010602001819号</span>
			<span>上海工商</span>
		</div>
		<script src="jquery.min.js"></script>
		<script>
			let address="http://127.0.0.1:81"
			//获取localStorage里面的内容
			let goodsid=localStorage.getItem("goodsid");
			let surname=localStorage.getItem("surname")
			let name=localStorage.getItem("name")
			let phone=localStorage.getItem("phone")
			let city=localStorage.getItem("city")
			let peopleaddress=localStorage.getItem("address")
			// console.log(goodsid)
			
			//实现存储和跳转功能
			let userMessage=sessionStorage.getItem("userMessage");
			if(!userMessage){
				location.href=`${address}/loadingpage.html`;
			}
			$(".ordersAddress").html(city+peopleaddress)
			$(".personphone").html(phone)
			$("#numberphone").val(phone)
			$("#urename").val(surname)
			$("#yourming").val(name)
			//展示当前订单的状态
			$(".leftOrder").click(function(){
				//点击的这个li加border
				$(this).css({
					borderLeft:"3px solid #f9b949",
					})
					//显示订单状态
					$(".content-orders").css({
						display:"block"
					})
					//隐藏个人中心
					$(".content-right").css({
						display:"none"
					})
					//隐藏上一个li的border
					$(".leftCenter").css({
						borderLeft:"none",
					})
					$(".content-address").css({
						display:"none"
					})
					$(".leftLocation").css({
						borderLeft:"none",
					})
					//隐藏账户信息
					$(".content-personmessage").css({
						display:"none"
					})
					$(".leftFormation").css({
						borderLeft:"none"
					})
					//获取商品信息
					$.ajax({
						url:`${address}/details`,
						data:{
							id:goodsid
						},
						success(data){
							$(".content-orders-down").find("img").attr("src",data.img)
							$(".price").html(data.price);
							$(".size").html(data.p);
							$(".color").html(data.color);
						}
					})
					$(".content-orders-down .p").click(function(){
						window.location.href=`${address}/paypage.html`
					})
					
			})
			//显示收货地址
			
			// console.log(addressMessage)
			$(".leftLocation").click(function(){
				//详细地址显示
				$(".content-address").css({
					display:"block"
				})
				//收货地址的li加border
				$(this).css({
					borderLeft:"3px solid #f9b949",
					})
				//订单页隐藏
				$(".content-orders").css({
					display:"none"
				})
				//订单页的li的border隐藏
				$(".leftOrder").css({
					borderLeft:"none"
				})
				//隐藏个人中心
				$(".content-right").css({
					display:"none"
				})
				//隐藏上一个li的border
				$(".leftCenter").css({
					borderLeft:"none",
				})
				//隐藏账户信息
				$(".content-personmessage").css({
					display:"none"
				})
				$(".leftFormation").css({
					borderLeft:"none"
				})
				let rightUp=$(".right-up");
				
				$.ajax({
					url:`${address}/getcustomeraddress`,
					data:{
						
					},
					success(data){
						console.log(data)
						$(".ordersAddress").html(data.city)
						$(".personphone").html(data.phone)
					}
				})
			})
			//显示账户信息
			$(".leftFormation").click(function(){
				// alert(1)
				//显示账户信息
				$(".content-personmessage").css({
					display:"block"
				})
				//显示border
				$(this).css({
					borderLeft:"3px solid #f9b949"
				})
				//隐藏其他页面的信息
				//订单页隐藏
				$(".content-orders").css({
					display:"none"
				})
				//订单页的li的border隐藏
				$(".leftOrder").css({
					borderLeft:"none"
				})
				//隐藏个人中心
				$(".content-right").css({
					display:"none"
				})
				//隐藏上一个li的border
				$(".leftCenter").css({
					borderLeft:"none",
				})
				//隐藏收货地址
				$(".content-address").css({
					display:"none"
				})
				$(".leftLocation").css({
					borderLeft:"none",
				})
			})
			//展示用户信息和退出登录
			$(".customername").html(JSON.parse(userMessage)[0].name);
			$(".person").html(JSON.parse(userMessage)[0].name);
			sessionStorage.removeItem("userMessage");
			localStorage.clear()
			$(".back").click(function(){
				
				location.href=`${address}/FENDI_firstpage.html`;
				$(".person").html("");
			})
		</script>
	</body>
</html>
